<template>
  <div class="expand-box">
    <div v-if="bigDataShow.isExpired"
         class="expand-mark">
      <img :src="require('@/static/images/overdue.png')" />
    </div>
    <div class="period">
      有效期：<span class="text-color">{{bigDataShow.validFromDate}}</span> 至 <span class="text-color">{{bigDataShow.validToDate}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppreciateExpand',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    bigDataShow () {
      return this.value
    }
  }
}
</script>

<style scoped>
.expand-box {
  font-size: 16px;
}
.expand-mark {
  position: absolute;
  top: 0;
  right: 0;
}
.period {
  position: absolute;
  top: 50%;
}
.text-color {
  color: #eb662b;
}
</style>